// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';

.no-js .c-dad-jokes-banner {
    display: none;
}

.c-dad-jokes-banner {
    // related to js show/hide behaviour
    visibility: visible;
    opacity: 0;
    transition: opacity 0.5s;

    &.hide-banner {
        visibility: hidden;
    }

    &.fade-in-banner {
        opacity: 1;
    }

    // unrelated to js
    @include f3.border;
    @include text-body-md;
    background-color: f3.$yellow-primary;
    font-weight: bold;
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 4; // mental health section uses z-index 3
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    box-sizing: border-box;

    .mzp-l-content {
        padding: $spacing-sm $spacing-md;
    }

    p {
        margin-bottom: $spacing-sm;
    }

    button {
        @include f3.button(f3.$black);
        padding-right: $spacing-md;
        padding-left: $spacing-md;
    }
}

@supports (flex: 1 0 auto) {
    .c-dad-jokes-banner {
        .l-flex {
            display: flex;
            gap: $spacing-sm $spacing-lg;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            p {
                flex: 1 0 auto;
                margin-bottom: 0;
            }

            button {
                flex: 0 0 auto;
            }

            @media #{$mq-md} {
                flex-flow: row wrap;
                justify-content: center;

                button {
                    padding-right: $spacing-2xl;
                    padding-left: $spacing-2xl;
                }
            }

            @media #{$mq-lg} {
                justify-content: space-between;

                &.mzp-l-content {
                    padding-right: $spacing-lg;
                    padding-left: $spacing-lg;

                    &::after {
                        display: none; // Protocol override to allow space-between to work
                    }
                }
            }
        }

        &-button-wrapper {
            position: relative;
        }

        button {
            transition: opacity 0.5s;
            cursor: pointer;

            &[disabled] {
                opacity: 0;
            }
        }
    }

    // emoji animation inspiration: https://codepen.io/diyorbek0309/pen/mdwbEve
    .emoji-wrapper {
        $duration: 1s;
        position: absolute;
        width: 65px;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        pointer-events: none;

        img {
            height: 45px;
            width: 45px;
            position: absolute;
            display: none;
            opacity: 0;
        }

        &.animate-bubbles {
            img {
                display: block;
                animation: animate-bubbles $duration ease-out forwards 1;
            }

            // create stagger effect
            img:nth-of-type(2) {
                animation-delay: calc(0.3 * #{$duration});
            }

            img:nth-of-type(3) {
                animation-delay: $duration;
            }

            img:nth-of-type(4) {
                animation-delay: calc(0.5 * #{$duration});
            }

            img:nth-of-type(5) {
                animation-delay: calc(0.8 * #{$duration});
            }

            [src$='eyeroll.svg'] {
                right: 0;
            }

            [src$='grimace.svg'] {
                right: 80%;
            }
        }

        @keyframes animate-bubbles {
            0% {
                transform: scale(0) translateY(0) rotate(10deg);
                opacity: 0;
            }

            1% {
                opacity: 1;
            }

            75% {
                opacity: 1;
            }

            100% {
                transform: scale(1.3) translateY(-80px) rotate(0deg);
                opacity: 0;
            }
        }

        &.animate-emoji-appearance {
            img:last-of-type {
                display: block;
                opacity: 0;
                animation: animate-emoji-appearance $duration linear forwards 1;
            }
        }

        @keyframes animate-emoji-appearance {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }
}
